import React, { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom";
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import { indexSearch } from '../../api/indexApi'

// 关键字染色
import { highlightSearchResult } from '../../math'

// 加载图标样式
const antIcon = (
    <LoadingOutlined
        style={{
            fontSize: 24,
        }}
        spin
    />
);

function Artists() {
    const [searchPool, setSearchPool] = useState([]); // 搜索结果池

    const [loading, setLoading] = useState([]); // 加载状态

    const [searchParams] = useSearchParams(); // 搜索参数
    const s = searchParams.get('s');
    
    // 搜索歌手，结果赋值到searchPool
    useEffect(() => {
        if (s) {
            setLoading(true)
            indexSearch(s, '100', 24)
                .then((res) => {
                    if(res.data.result.artists){
                        setSearchPool(res.data.result.artists)
                        setLoading(false)
                    }else{
                        setLoading(false)
                    }
                })
                .catch((err) => {
                    console.error(err)
                    setLoading(false)
                })
        } else {
            setLoading(false)
        }
    }, [s]);

    return (
        <div>
            <div className='count'> 搜索"{s}",找到<span>{searchPool.length}</span>个歌手</div>
            {
                loading ? (
                    <Spin indicator={antIcon} tip="Loading"><div className='loadingbox'></div></Spin>
                ) : (
                    <div className='searchArtistContainer'>
                        {searchPool.map((item) => {
                        return <li className='searchliArtis' key={item.id}>
                                <img src={item.picUrl}/>
                                <div>
                                    <p title={item.name} className='artistsname'>{highlightSearchResult(item.name,s)}</p>
                                    <svg t="1678158678231" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2756"><path d="M512 78.769231C272.541538 78.769231 78.769231 272.541538 78.769231 512c0 115.003077 44.898462 219.372308 117.76 296.96 25.6 27.175385 55.138462 51.2 87.04 71.286154C349.735385 921.6 428.110769 945.230769 512 945.230769s162.264615-24.024615 228.430769-64.984615c31.901538-20.086154 61.44-43.716923 87.04-71.286154 72.861538-77.587692 117.76-181.956923 117.76-296.96 0-239.458462-193.772308-433.230769-433.230769-433.230769z m0 771.938461c-77.587692 0-149.267692-26.387692-206.375385-70.498461 36.627692-77.193846 115.396923-130.363077 206.375385-130.363077s169.747692 53.563077 206.375385 130.363077C661.267692 824.32 589.587692 850.707692 512 850.707692z m-82.707692-378.092307c0-45.686154 37.021538-82.707692 82.707692-82.707693s82.707692 37.021538 82.707692 82.707693-37.021538 82.707692-82.707692 82.707692-82.707692-37.021538-82.707692-82.707692z m357.612307 236.701538c-33.083077-53.563077-81.132308-96.886154-138.633846-123.667692 25.6-30.72 40.96-70.104615 40.96-113.033846 0-97.673846-79.556923-177.230769-177.230769-177.23077s-177.230769 79.556923-177.230769 177.23077c0 42.929231 15.36 82.313846 40.96 113.033846-57.501538 26.781538-105.550769 70.104615-138.633846 123.667692C196.923077 653.784615 173.292308 585.649231 173.292308 512c0-186.683077 152.024615-338.707692 338.707692-338.707692s338.707692 152.024615 338.707692 338.707692c0 73.649231-23.630769 141.784615-63.803077 197.316923z" p-id="2757"></path></svg>
                                </div>
                            </li>
                        })}
                    </div>
                )
            }
        </div>
    );
}

export default Artists;